// 关于我们页面
<template>
  <div class="about-us">
    <!-- 头部导航栏 -->
    <navigation-bar>
      <template>
        <img src="../../assets/img/logo.svg" alt />
      </template>
    </navigation-bar>
    <!-- 关于我们头部 -->
    <public-header :imgUrl="backgroundImg">
      <h1>关于我们</h1>
      <p>首页/ 关于我们</p>
    </public-header>
    <!-- 了解我们 -->
    <know-us ref='knowUs'></know-us>
    <!-- 我的设备信息 -->
    <equipment-information></equipment-information>
    <!-- 产品介绍组件 -->
    <product-content></product-content>
    <!-- 高德地图组件 -->
    <gaode-map></gaode-map>
    <!-- 底部链接组件 -->
    <footer-link></footer-link>
    
  </div>
</template>
<script>
import KnowUs from "./home/know-us"; //了解我们组件
import EquipmentInformation from "./home/equipment-information"; //我的设备信息组件
import ProductContent from "./home/product-content"; // 产品介绍组件
// import ContactUs from "./home/contact-us"; //联系我们组件
import GaodeMap from './home/gaode-map'//高德地图组件
export default {
  name: "AboutUs",
  data() {
    return {
      backgroundImg: require("@/assets/img/about_us/about_us.jpg") //头部背景图片地址
    };
  },
  // 添加私有导航守卫
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
     next(vm => {
      vm.$refs.knowUs.loadLister()
    // beforeRouteEnter不能通过this访问组件实例，但是可以通过 vm 访问组件实例
    // console.log(vm.loadLister())   //vm.demodata即this.demodata
  }) 
  },
  components: {
    KnowUs,
    EquipmentInformation,
    ProductContent,
    // ContactUs,
    GaodeMap
  }
};
</script>
<style lang='scss' scoped>
.about-us {
}
</style>